<!--
 * @Author: pmy
 * @Date: 2022-10-31 14:54:18
 * @LastEditors: pmy
 * @LastEditTime: 2022-10-31 15:08:39
 * @FilePath: \bdcar-net\src\components\common\overflowShowTooltip.vue
 * @Description: 超出长度显示tooltip
 * Copyright (c) 2022 by pmy/exsun, All Rights Reserved. 
-->
<template>
  <div class="tooltip-container">
    <el-tooltip class="my-tooltip" :disabled="notShow" :content="text">
      <div ref="tooltipBox" class="text-box">
        <span ref="tooltipItem">{{text}}</span>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: "myTooltip",
  props: {
    text: {
      type: String,
      default: () => ""
    }
  },
  data() {
    return {
      notShow: true
    }
  },
  watch: {
    text: {
      handler() {
        this.$nextTick(() => this.checkWidth());
      },
      immediate: true
    }
  },
  methods: {
    checkWidth() {
      const parentWidth = this.$refs['tooltipBox'].offsetWidth;
      const sonWidth = this.$refs['tooltipItem'].offsetWidth;
      this.notShow = parentWidth >= sonWidth
    }
  }
};
</script>

<style scoped lang="less">
.tooltip-container {
  width: 100%;
  .text-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>